<template>
  <section class="owner-contractTable">
    <a-table
      :dataSource="dataList"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      rowKey="id"
      @change="handleTableChange"
      :customRow="customRow"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'contract_tag_txt'">
          <template v-if="formatTag(text).length > 0">
            <a-tag v-for="item in formatTag(text)" :key="item">{{
              item
            }}</a-tag>
          </template>
        </template>
        <template v-if="column.key === 'status'">
          <span v-if="text == 2" style="color: #87d068">{{
            record.status_txt
          }}</span>
          <span v-else style="color: #999999">{{ record.status_txt }}</span>
        </template>
      </template>
    </a-table>

    <!--  合同详情  -->
    <ContractDetailDrawer
      :visible="contractDetailVisible"
      :id="contractDetailId"
      @handleCancel="
        () => {
          contractDetailVisible = false;
        }
      "
      @closeAllModal="closeAllModal"
    />
  </section>
</template>

<script>
import {
  defineComponent,
  ref,
  toRefs,
  watch,
  computed,
  defineAsyncComponent,
} from "vue";
import { useRouter } from "vue-router";
import request from "../../../common/utils/request";
import moment from "moment";
import utils from "../../../common/utils/utils";
const ContractDetailDrawer = defineAsyncComponent(() =>
  import("@/views/contract/ContractDetail/ContractDetailDrawer.vue")
);

export default defineComponent({
  name: "ownerContractTable",
  components: { ContractDetailDrawer },
  props: {
    id: Number,
  },
  setup(props, context) {
    const $router = useRouter();
    const contractDetailVisible = ref(false);
    const contractDetailId = ref(0);

    const loading = ref(false);
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const dataList = ref([]);

    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));

    watch([page, limit], () => {
      getContractTableData();
    });

    watch(
      () => props.id,
      (val) => {
        init();
      }
    );

    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      // }
    };

    const getContractTableData = () => {
      loading.value = true;
      request
        .post("/org", "/owner/contractList", {
          page: page.value,
          limit: limit.value,
          id: props.id,
        })
        .then((res) => {
          loaded = true;
          console.log("------------------", res);
          dataList.value = res.list;
          total.value = res.total;
        })
        .finally(() => {
          loading.value = false;
        });
    };

    const init = () => {
      getContractTableData();
    };

    init();

    const closeAllModal = () => {
      context.emit("closeAllModal");
    };

    const columns = [
      {
        title: "合同编号",
        dataIndex: "contract_number",
      },
      {
        title: "合同标签",
        dataIndex: "contract_tag_txt",
        key: "contract_tag_txt",
      },
      {
        title: "租赁单价",
        dataIndex: "lease_unit_price",
        customRender: ({ text, record, index }) => {
          return text + record.lease_unit_price_unit;
        },
      },
      {
        title: "楼宇名称",
        dataIndex: "build_name",
      },
      {
        title: "楼号/房号",
        dataIndex: "room_info",
      },
      {
        title: "租赁面积",
        dataIndex: "lease_area",
        customRender: ({ text, record, index }) => {
          return text + record.lease_square_unit;
        },
      },
      {
        title: "签订日",
        dataIndex: "created_at",
        customRender: ({ text, record, index }) => {
          return moment(text).format("YYYY-MM-DD");
        },
      },
      {
        title: "开始日",
        dataIndex: "lease_starttime",
      },
      {
        title: "结束日",
        dataIndex: "lease_endtime",
      },
      {
        title: "合同状态",
        dataIndex: "status",
        key: "status",
      },
    ];

    // 自定义行
    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => handleTableRowClick(record),
      };
    };

    // 点击行
    const handleTableRowClick = (record) => {
      if (record.id) {
        contractDetailId.value = record.id;
        contractDetailVisible.value = true;
      }
    };

    const formatTag = (string) => {
      let arr = [];
      arr = string.split(",");
      return arr;
    };

    let loaded = false;
    watch(
      () => props.active,
      (val) => {
        if (val && !loaded) {
          init();
        }
      }
    );

    return {
      loading,
      page,
      limit,
      total,
      dataList,
      columns,
      customRow,
      formatTag,
      pagination,
      handleTableChange,
      contractDetailVisible,
      contractDetailId,
      closeAllModal,
    };
  },
});
</script>

<style lang="less" scoped></style>
